<template>
  <el-card class="address-card" shadow="hover">
    <template #header>
      <div class="card-header">
        <h3>常用地址</h3>
        <el-button type="primary" link @click="$router.push('/addressBook')">管理地址簿</el-button>
      </div>
    </template>
    
    <div class="address-list" v-loading="loading">
      <div class="address-item" v-for="(address, index) in frequentAddresses" :key="index">
        <div class="address-icon">
          <el-icon><Location /></el-icon>
        </div>
        <div class="address-info">
          <div class="address-name">{{ address.name }} {{ address.phone }}</div>
          <div class="address-detail">{{ address.address }}</div>
        </div>
        <div class="address-actions">
          <el-button type="primary" size="small" @click="useAddress(address)">
            <el-icon><Promotion /></el-icon>
            发货
          </el-button>
        </div>
      </div>
    </div>
    
    <div class="empty-placeholder" v-if="(!frequentAddresses || frequentAddresses.length === 0) && !loading">
      <el-empty description="暂无常用地址"></el-empty>
    </div>
  </el-card>
</template>

<script setup lang="ts">
import { useRouter } from 'vue-router'
import { Location, Promotion } from '@element-plus/icons-vue'

interface Address {
  address: string
  phone: string
  name: string
  totalWeight?: number // 可选，因为我们不显示
}

defineProps<{
  frequentAddresses: Address[]
  loading: boolean
}>()

const router = useRouter()

// 使用地址创建订单
const useAddress = (address: Address) => {
  router.push({
    path: '/createOrder',
    query: { 
      name: address.name,
      phone: address.phone,
      address: address.address
    }
  })
}
</script>

<style scoped>
.address-card {
  min-height: 300px;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.card-header h3 {
  font-size: 16px;
  font-weight: 600;
  margin: 0;
}

.empty-placeholder {
  margin: 40px 0;
  display: flex;
  justify-content: center;
}

.address-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.address-item {
  display: flex;
  align-items: center;
  padding: 16px;
  border-radius: 8px;
  background-color: #f5f7fa;
}

.address-icon {
  margin-right: 16px;
  font-size: 20px;
  color: #409EFF;
}

.address-info {
  flex: 1;
}

.address-name {
  font-weight: 600;
  margin-bottom: 8px;
}

.address-detail {
  color: #606266;
  font-size: 14px;
}

.address-actions {
  margin-left: 16px;
}
</style>